import { useState } from 'react'
import { Input } from '.'

export default function TextInput({ type = 'doubleclick', value, onChange = val => {}, onSave = val => {}, ...props }) {
  const [edit, setEdit] = useState(false)

  if (edit) {
    return (
      <Input
        defaultValue={value}
        {...props}
        onKeyDown={event => {
          if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault()
            onSave(event.target.value)
            setEdit(false)
          }
        }}
        onBlur={e => {
          onSave(e.target.value)
          setEdit(false)
        }}
        onChange={onChange}
      ></Input>
    )
  }

  return (
    <p
      className="w-full overflow-hidden text-ellipsis border border-transparent px-3 py-1 text-sm"
      onDoubleClick={() => setEdit(true)}
      onMouseOver={() => type === 'hover' && setEdit(true)}
    >
      {value}
    </p>
  )
}
